<template>
  <div id="effect">
    <el-container>
      <el-aside id="side-container" width="60px">
        <left-side @listenToChildEvent="showKey"></left-side>
      </el-aside>
      <el-container id="main-container">
        <effect-space :imgData="imgData"></effect-space>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import LeftSide from "../Effect/LeftSide";
import EffectSpace from "../Effect/EffectSpace";
import { getEffectData } from "../../router/data";

export default {
  data() {
    return {
      imgData: []
    };
  },
  components: {
    LeftSide,
    EffectSpace
  },
  methods: {
    showKey(packageName, folderName) {
      console.log(packageName, folderName);
      getEffectData({ packageName: packageName, folderName: folderName })
        .then(res => {
          this.imgData = res["data"]["data"];
          console.log(this.imgData);
        })
        .catch(err => {
          alert("未成功请求到服务器");
        });
    }
  }
};
</script>

<style scoped>
#effect {
  height: 100%;
}
#side-container {
  overflow: hidden;
  background: red;
  position: fixed;
}
#main-container {
  margin-left: 60px;
}
</style>
